<script>
/*
 * @Author: wzh 
 * @Date: 2021-01-06 11:39:10 
 * @Last Modified by: 1521620993@qq.com
 * @Last Modified time: 2021-01-20 11:21:02
 */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09-可爱的小青蛙</title>
</head>
<body>
<style>
body {
  margin: 0;
  padding: 0;
  background-color: #48cae4;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .froggy {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  animation: float 3s forwards infinite alternate;
}
@keyframes float {
  0% {
    transform: translateX(-7.5px);
  }
  100% {
    transform: translateX(7.5px);
  }
}
body .froggy .head {
  background-color: #9dcc1c;
  width: 14rem;
  height: 8.5rem;
  border-radius: 50%;
  position: relative;
}
body .froggy .head::before, body .froggy .head::after {
  content: "";
  background-color: #9dcc1c;
  position: absolute;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  z-index: 1;
}
body .froggy .head::before {
  top: -1rem;
  left: 1rem;
}
body .froggy .head::after {
  top: -1rem;
  left: 7.75rem;
}
body .froggy .head .eyes {
  position: absolute;
  z-index: 2;
}
body .froggy .head .eyes .eye1, body .froggy .head .eyes .eye2 {
  border-radius: 50%;
  background-color: #333;
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 2rem;
}
body .froggy .head .eyes .eye2 {
  left: 9.3rem;
}
body .froggy .head .eyes .white_eye {
  background-color: #fff;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  position: absolute;
  left: 1rem;
  top: 0.2rem;
}
body .froggy .head .blush .blush1, body .froggy .head .blush .blush2 {
  background-color: #ffcc99;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  top: 3rem;
  left: 0.8rem;
}
body .froggy .head .blush .blush2 {
  top: 3rem;
  left: 10.6rem;
}
body .froggy .head .smile {
  background-color: #9dcc1c;
  width: 6.5rem;
  height: 2.5rem;
  border: 5px solid #000;
  clip-path: inset(40% 0% 0% 0%);
  position: absolute;
  top: 3rem;
  left: 3.4rem;
  z-index: 2;
  border-radius: 50%;
}
body .froggy .frog_body {
  width: 11rem;
  height: 8rem;
  background-color: #9dcc1c;
  border-radius: 50%;
  position: relative;
  top: -2.5rem;
}
body .froggy .frog_body::before, body .froggy .frog_body::after {
  content: "";
  background-color: #9dcc1c;
  width: 6rem;
  height: 3rem;
  position: absolute;
  border-radius: 50%;
  clip-path: inset(40% 0% 0% 0%);
}
body .froggy .frog_body::before {
  transform: rotate(170deg);
  top: 6.2rem;
  left: -0.6rem;
}
body .froggy .frog_body::after {
  transform: rotate(-170deg);
  top: 6.2rem;
  left: 5.6rem;
}
body .froggy .frog_body {
  display: flex;
  justify-content: center;
  align-items: center;
}
body .froggy .frog_body .white_tummy {
  background: #fff;
  width: 7.5em;
  height: 4.5rem;
  border-radius: 50%;
  position: absolute;
  top: 2rem;
}
body .froggy .frog_body .hand1, body .froggy .frog_body .hand2 {
  background-color: #9dcc1c;
  width: 1.5rem;
  height: 6.5em;
  position: absolute;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  transform: rotate(-20deg);
  top: 2rem;
  left: 2.7rem;
}
body .froggy .frog_body .hand2 {
  transform: rotate(20deg);
  left: 6.9rem;
}
body .froggy .frog_body .finger1, body .froggy .frog_body .finger2 {
  background-color: #9dcc1c;
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  top: 7.2rem;
  clip-path: polygon(68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
body .froggy .frog_body .finger1 {
  transform: rotate(-55deg);
  left: 3.3rem;
}
body .froggy .frog_body .finger2 {
  transform: rotate(-15deg);
  left: 5.3rem;
}
body .froggy .frog_body .leg1, body .froggy .frog_body .leg2 {
  background-color: #9dcc1c;
  width: 5rem;
  height: 3.5rem;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  transform: rotate(25deg);
  left: -1.3rem;
  top: 3rem;
}
body .froggy .frog_body .leg2 {
  transform: rotate(-25deg);
  left: 7.3rem;
}
body .froggy .lilypad {
  border-radius: 50%;
  width: 21rem;
  height: 7rem;
  background-color: #379936;
  position: absolute;
  top: 10rem;
  z-index: -2;
}
body .froggy .lilypad:before {
  content: "";
  background-color: #48cae4;
  width: 6rem;
  height: 3rem;
  position: absolute;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: 0.5rem;
  left: 18rem;
  transform: rotate(10deg);
}
</style>
  <div class="froggy">
    <!-- 头部 -->
    <div class="head">

      <!-- 眼睛 -->
      <div class="eyes">
        <div class="eye1">
          <div class="white_eye"></div>
        </div>
        <div class="eye2">
          <div class="white_eye"></div>
        </div>
      </div>

      <!-- 酒窝 -->
      <div class="blush">
        <div class="blush1"></div>
        <div class="blush2"></div>
      </div>

      <!-- 微笑嘴 -->
      <div class="smile"></div>
    </div>

    <!-- 身体 -->
    <div class="frog_body">
      <!-- 肚子 -->
      <div class="white_tummy"></div>
      <!-- 手臂 -->
      <div class="hand1"></div>
      <div class="hand2"></div>
      <!-- 手指 -->
      <div class="finger1"></div>
      <div class="finger2"></div>
      <!-- 腿部 -->
      <div class="leg1"></div>
      <div class="leg2"></div>
    </div>
    
    <!-- 荷叶 -->
    <div class="lilypad"></div>
  </div>
  <!-- 
    scss
body {
  margin: 0;
  padding: 0; 
  background-color: #48cae4;
  display: flex;
  justify-content: center;
  align-items: center;
  .froggy {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    animation: float 3s forwards infinite alternate;
    @keyframes float {
      0% {
        transform: translateX(-7.5px);
      }
      100% {
        transform: translateX(7.5px);
      }
    }
    .head {
      background-color: #9dcc1c;
      width: 14rem;
      height: 8.5rem;
      border-radius: 50%;
      position: relative;
      // top: 0;
      &::before,
      &::after {
        content: '';
        background-color:  #9dcc1c;
        position: absolute;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        z-index: 1
      }
      &::before {
        top: -1rem;
        left: 1rem;
      }
      &::after {
        top: -1rem;
        left: 7.75rem;
      }
      .eyes {
        position: absolute;
        z-index: 2;
        .eye1 {
          border-radius: 50%;
          background-color: #333;
          width: 2rem;
          height: 2rem;
          position: absolute;
          left: 2rem;
        }
        .eye2 {
          @extend .eye1;
          left: 9.3rem;
        }
        .white_eye {
          background-color: #fff;
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
          position: absolute;
          left: 1rem;
          top: 0.2rem;
        }
      }
      .blush {
        .blush1 {
          background-color: #ffcc99;
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          position: absolute;
          z-index: 2;
          top: 3rem;
          left: 0.8rem;
        }
        .blush2 {
          @extend .blush1;
          top: 3rem;
          left: 10.6rem
        }
      }
      .smile {
        background-color: #9dcc1c;
        width: 6.5rem;
        height: 2.5rem;
        border: 5px solid #000;
        clip-path: inset(40% 0% 0% 0%);
        position: absolute;
        top: 3rem;
        left: 3.4rem;
        z-index: 2;
        border-radius: 50%;
      }
    }
    .frog_body {
      width: 11rem;
      height: 8rem;
      background-color: #9dcc1c;
      border-radius: 50%;
      position: relative;
      top: -2.5rem;
      &::before,
      &::after {
        content: '';
        background-color: #9dcc1c;
        width: 6rem;
        height: 3rem;
        position: absolute;
        border-radius: 50%;
        clip-path: inset(40% 0% 0% 0%);
      }
      &::before {
        transform: rotate(170deg);
        top: 6.2rem;
        left: -0.6rem
      }
      &::after {
        transform: rotate(-170deg);
        top: 6.2rem;
        left: 5.6rem;
      }
      & {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .white_tummy {
        background: #fff;
        width: 7.5em;
        height: 4.5rem;
        border-radius: 50%;
        position: absolute;
        top: 2rem;
      }
      .hand1 {
        background-color:  #9dcc1c;
        width: 1.5rem;
        height: 6.5em;
        position: absolute;
        z-index: 2;
        clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
        transform: rotate(-20deg);
        top: 2rem;
        left: 2.7rem;
      }
      .hand2 {
        @extend .hand1;
        transform: rotate(20deg);
        left: 6.9rem;
      }
      .finger1, .finger2 {
        background-color: #9dcc1c;
        width: 2.5rem;
        height: 2.5rem;
        position: absolute;
        top: 7.2rem;
        clip-path: polygon(68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      }
      .finger1 {
        transform: rotate(-55deg);
        left: 3.3rem;
      }
      .finger2 {
        transform: rotate(-15deg);
        left: 5.3rem;
      }
      .leg1 {
        background-color: #9dcc1c;
        width: 5rem;
        height: 3.5rem;
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        transform: rotate(25deg);
        left: -1.3rem;
        top: 3.0rem;
      }
      .leg2 {
        @extend .leg1;
        transform: rotate(-25deg);
        left: 7.3rem;
      }
    }
    .lilypad {
      border-radius: 50%;
      width: 21rem;
      height: 7rem;
      background-color: #379936;
      position: absolute;
      top: 10rem;
      z-index: -2;
      &:before {
        content: '';
        background-color: #48cae4;
        width: 6rem;
        height: 3rem;
        position: absolute;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        top: 0.5rem;
        left: 18rem;
        transform: rotate(10deg);
      }
    }
  }
}
   -->
</body>
</html>